<template>
  <div class="left_sale">
    <cn-title title="销售大数据"></cn-title>
    <div class="sale_data">
      <div
        title="查看销售详情"
        @click="openDetail('count')"
        class="sale_count pointer"
      >
        <img class="p_c" src="@/assets/img/icon12.png" alt="" />
        <div class="desc">
          <span class="value"
            ><count-to
              :start-val="0"
              :end-val="Number(saleCount.value)"
              :duration="3000"
              :decimals="2"
          /></span>
          <span class="unit">{{ saleCount.unit }}</span>
        </div>
        <div class="name">{{ saleCount.name }}</div>
      </div>
      <div
        title="查看线上销售详情"
        @click="openDetail('online')"
        class="sale_online d_a_c pointer"
      >
        <img class="icon" src="@/assets/img/icon_xianshang.png" alt="" />
        <div class="more">
          <div>
            <span class="value"
              ><count-to
                :start-val="0"
                :end-val="Number(saleOnline.value)"
                :duration="3000"
                :decimals="2" /></span
            ><span class="unit">{{ saleOnline.unit }}</span>
          </div>
          <div class="name">{{ saleOnline.name }}</div>
        </div>
      </div>
      <div
        title="查看线下销售详情"
        @click="openDetail('offline')"
        class="sale_online d_a_c pointer"
      >
        <img class="icon" src="@/assets/img/icon_xianxia.png" alt="" />
        <div class="more">
          <div>
            <span class="value"
              ><count-to
                :start-val="0"
                :end-val="Number(saleOffline.value)"
                :duration="3000"
                :decimals="2" /></span
            ><span class="unit">{{ saleOffline.unit }}</span>
          </div>
          <div class="name">{{ saleOffline.name }}</div>
        </div>
      </div>
      <div
        title="查看销售件数详情"
        @click="openDetail('number')"
        class="sale_online d_a_c pointer"
      >
        <img class="icon" src="@/assets/img/icon_qian.png" alt="" />
        <div class="more">
          <div>
            <span class="value"
              ><count-to
                :start-val="0"
                :end-val="Number(saleNum.value)"
                :duration="3000"
                :decimals="2" /></span
            ><span class="unit">{{ saleNum.unit }}</span>
          </div>
          <div class="name">{{ saleNum.name }}</div>
        </div>
      </div>
    </div>
    <div class="more_data">
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          爆品销售分析
          <span></span>
        </div>
        <div id="chart1" class="chart_1"></div>
      </div>
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          企业销售数据
          <span></span>
        </div>
        <div id="chart2" class="chart_2"></div>
      </div>
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          产业销售数据
          <span></span>
        </div>
        <div id="chart3" class="chart_3"></div>
      </div>
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          平台销售数据
          <span></span>
        </div>
        <div id="chart4" class="chart_4"></div>
      </div>
    </div>
    <drag ref="saleCountDetail" id="saleCountDetail" title="销售总金额数据概览">
      <sale-count-detail />
    </drag>

    <drag ref="saleOnlineDetail" id="saleOnlineDetail">
      <sale-online-detail />
    </drag>

    <drag ref="saleOfflineDetail" id="saleOfflineDetail">
      <sale-offline-detail />
    </drag>
    <drag ref="saleNumberDetail" id="saleNumberDetail">
      <sale-number-detail />
    </drag>
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import CountTo from "vue-count-to";
import SaleCountDetail from "./components/SaleCountDetail.vue";
import SaleOnlineDetail from "./components/SaleOnlineDetail.vue";
import SaleOfflineDetail from "./components/SaleOfflineDetail.vue";
import SaleNumberDetail from "./components/SaleNumberDetail.vue";
import Drag from "@/components/Drag.vue";
export default {
  components: {
    CnTitle,
    SaleCountDetail,
    SaleOnlineDetail,
    SaleOfflineDetail,
    SaleNumberDetail,
    Drag,
    CountTo,
  },
  data() {
    return {
      saleCount: {
        value: "3.672",
        unit: "亿元",
        name: "销售总金额",
      },
      saleOnline: {
        value: "2137.6",
        unit: "万元",
        name: "线上销售总额",
      },
      saleOffline: {
        value: "5739.7",
        unit: "万元",
        name: "线下销售总额",
      },
      saleNum: {
        value: "46.7",
        unit: "万件",
        name: "销售件数",
      },
      saleCountDetailShow: false,
    };
  },
  mounted() {
    this.renderSaleChart1();
    this.renderSaleChart2();
    this.renderSaleChart3();
    this.renderSaleChart4();
  },
  methods: {
    renderSaleChart1() {
      let myChart = this.$echarts.init(document.getElementById("chart1"));
      let colorList = [
        "#009BFF",
        "#F65904",
        "#01FEA9",
        "#0AFAFB",
        "#F4C887",
        "#F6AD04",
      ];
      let myData = [
        { value: 3476, name: "糖果", index: 0 },
        { value: 2411, name: "玉米", index: 1 },
        { value: 2016, name: "绿豆", index: 2 },
        { value: 324, name: "杂粮", index: 3 },
        { value: 670, name: "羊肉", index: 4 },
        { value: 6783, name: "陶瓷", index: 5 },
      ];
      let option = {
        tooltip: {
          trigger: "item",
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: "/img/icon13.png",
                width: 35,
                height: 50,
              },
              left: "20%",
              top: "middle",
            },
          ],
        },
        legend: [
          {
            type: "scroll",
            orient: "vertical",
            align: "left",
            right: 60,
            top: 20,
            bottom: 10,
            itemWidth: 4,
            itemHeight: 10,
            formatter: function (name) {
              let str = "";
              let res = myData.filter((v) => v.name === name);
              if (res.length == 1) {
                str = "{name|" + name + " }{value|" + res[0].value + "}";
                switch (res[0].index) {
                  case 0:
                    str = "{name|" + name + " }";
                    break;
                  case 1:
                    str = "{name|" + name + " }";
                    break;
                  case 2:
                    str = "{name|" + name + " }";
                    break;
                  case 3:
                    str = "{name|" + name + " }";
                    break;
                  case 4:
                    str = "{name|" + name + " }";
                    break;
                  case 5:
                    str = "{name|" + name + " }";
                    break;
                }
                return str;
              }
              return str;
            },
            textStyle: {
              color: "#A6A6A6",
              rich: {
                name: {
                  fontSize: 14,
                  padding: [0, 20, 0, 0],
                  color: "#AED0EF",
                },
                value: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [0, 0, 0, 0],
                },
                a: {
                  fontSize: 14,
                  color: colorList[0],
                  padding: [0, 0, 0, 0],
                },
                b: {
                  fontSize: 14,
                  color: colorList[1],
                  padding: [0, 0, 0, 0],
                },
                c: {
                  fontSize: 14,
                  color: colorList[2],
                  padding: [0, 0, 0, 0],
                },
                d: {
                  fontSize: 14,
                  color: colorList[3],
                  padding: [0, 0, 0, 0],
                },
                e: {
                  fontSize: 14,
                  color: colorList[4],
                  padding: [0, 0, 0, 0],
                },
                f: {
                  fontSize: 14,
                  color: colorList[5],
                  padding: [0, 0, 0, 0],
                },
              },
            },
          },
          {
            type: "scroll",
            orient: "vertical",
            align: "right",
            right: 10,
            top: 20,
            bottom: 10,
            itemWidth: 0,
            itemHeight: 0,
            textStyle: {
              fontSize: 12,
              color: "inherit",
            },
            formatter: function (name) {
              let str = "";
              let res = myData.filter((v) => v.name === name);
              if (res.length == 1) {
                str = "{value|" + res[0].value + "}";
                switch (res[0].index) {
                  case 0:
                    str = "{a|" + res[0].value + "}";
                    break;
                  case 1:
                    str = "{b|" + res[0].value + "}";
                    break;
                  case 2:
                    str = "{c|" + res[0].value + "}";
                    break;
                  case 3:
                    str = "{d|" + res[0].value + "}";
                    break;
                  case 4:
                    str = "{e|" + res[0].value + "}";
                    break;
                  case 5:
                    str = "{f|" + res[0].value + "}";
                    break;
                }
                return str;
              }
              return str;
            },
            textStyle: {
              color: "#A6A6A6",
              rich: {
                name: {
                  fontSize: 14,
                  padding: [0, 20, 0, 0],
                  color: "#AED0EF",
                },
                value: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [0, 0, 0, 0],
                },
                a: {
                  fontSize: 14,
                  color: colorList[0],
                  padding: [0, 0, 0, 0],
                },
                b: {
                  fontSize: 14,
                  color: colorList[1],
                  padding: [0, 0, 0, 0],
                },
                c: {
                  fontSize: 14,
                  color: colorList[2],
                  padding: [0, 0, 0, 0],
                },
                d: {
                  fontSize: 14,
                  color: colorList[3],
                  padding: [0, 0, 0, 0],
                },
                e: {
                  fontSize: 14,
                  color: colorList[4],
                  padding: [0, 0, 0, 0],
                },
                f: {
                  fontSize: 14,
                  color: colorList[5],
                  padding: [0, 0, 0, 0],
                },
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["60%", "70%"],
            width: 140,
            roundCap: true,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: myData,
            itemStyle: {
              normal: {
                color: function (colors) {
                  return colorList[colors.dataIndex];
                },
                borderRadius: 20,
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 4,
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderSaleChart2() {
      let myChart = this.$echarts.init(document.getElementById("chart2"));
      let option = {
        grid: {
          // 当图表长度或者宽度被压缩了，设置grid即可
          left: "5%",
          right: "6%",
          bottom: "0%",
          top: "25%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "5%",
          left: "10%",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"],
          itemWidth: 0,
          itemHeight: 0,
          textStyle: {
            fontSize: 10,
            color: "inherit",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["亿家亲瓷业", "恒源瓷业", "智博科技", "龙欣瓷业"],
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
          },
        ],
        yAxis: [
          {
            name: "（万元）",
            nameTextStyle: {
              color: "#074C8B",
              fontSize: 10,
              align: "right",
            },
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 3,
          },
        ],
        series: [
          {
            name: "第一季度",
            type: "bar",
            barGap: 0,
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [33, 33, 33, 33],
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: "#008BEA",
              },
            },
          },
          {
            name: "第二季度",
            type: "bar",
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [12, 12, 12, 12],
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: "#09D5DF",
              },
            },
          },
          {
            name: "第三季度",
            type: "bar",
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [20, 20, 20, 20],
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: "#E75408",
              },
            },
          },
          {
            name: "第四季度",
            type: "bar",
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [25, 25, 25, 25],
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: "#01E19D",
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderSaleChart3() {
      let myChart = this.$echarts.init(document.getElementById("chart3"));
      let color = [
        "#009BFF",
        "#F65904",
        "#01FEA9",
        "#0AFBFC",
        "#F4C887",
        "#D1940C",
      ];
      let echartData = [
        {
          name: "一",
          value1: 30,
          value2: 10,
          value3: 0,
          value4: 5,
          value5: 20,
          value6: 24,
        },
        {
          name: "二",
          value1: 0,
          value2: 18,
          value3: 10,
          value4: 6,
          value5: 23,
          value6: 30,
        },
        {
          name: "三",
          value1: 0,
          value2: 8,
          value3: 19,
          value4: 12,
          value5: 15,
          value6: 14,
        },
        {
          name: "四",
          value1: 4,
          value2: 5,
          value3: 12,
          value4: 22,
          value5: 14,
          value6: 5,
        },
        {
          name: "五",
          value1: 19,
          value2: 24,
          value3: 15,
          value4: 18,
          value5: 40,
          value6: 24,
        },
        {
          name: "六",
          value1: 2,
          value2: 4,
          value3: 15,
          value4: 15,
          value5: 17,
          value6: 24,
        },
      ];

      let xAxisData = echartData.map((v) => v.name);
      let yAxisData1 = echartData.map((v) => v.value1);
      let yAxisData2 = echartData.map((v) => v.value2);
      let yAxisData3 = echartData.map((v) => v.value3);
      let yAxisData4 = echartData.map((v) => v.value4);
      let yAxisData5 = echartData.map((v) => v.value5);
      let yAxisData6 = echartData.map((v) => v.value6);

      let option = {
        color: color,
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          top: "35%",
          containLabel: true,
        },
        legend: {
          left: 20,
          top: 5,
          itemWidth: 14, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10, // 设置间距
          textStyle: {
            fontSize: 12,
            fontFamily: "Microsoft YaHei",
            color: "#AED0EF",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              html += `<div style="color: #666;font-size: 12px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName} ${v.name}月
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 12px">${v.value}</span>
                `;
            });

            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}月",
              textStyle: {
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                color: "#AED0EF",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#02D2D6",
              },
            },
            axisTick: {
              show: false,
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "︵\n万\n元\n︶",
            nameTextStyle: {
              color: "#074C8B",
              fontSize: 10,
              // align: "right",
              padding: [0, 10, -5, -20],
            },
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 3,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "种植业",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[0],
              },
            },
            data: yAxisData1,
          },
          {
            name: "养殖业",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[1],
              },
            },
            data: yAxisData2,
          },
          {
            name: "畜牧业",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[2],
              },
            },
            data: yAxisData3,
          },
          {
            name: "企业",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[3],
              },
            },
            data: yAxisData4,
          },
          {
            name: "物流仓储",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[4],
              },
            },
            data: yAxisData5,
          },
          {
            name: "跨境电商",
            type: "line",
            symbolSize: 6,
            symbol: "circle", //标记的图形为实心圆
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: color[5],
              },
            },
            data: yAxisData6,
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderSaleChart4() {
      let myChart = this.$echarts.init(document.getElementById("chart4"));
      let colorList = [
        "#009BFF",
        "#F65904",
        "#01FEA9",
        "#0AF9FB",
        "#F4C887",
        "#F6AD04",
      ];
      let option = {
        grid: {
          // 当图表长度或者宽度被压缩了，设置grid即可
          left: "4%",
          right: "5%",
          bottom: "0%",
          top: "30%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: 60,
          top: 0,
          bottom: 10,
          itemWidth: 0,
          itemHeight: 0,
          // itemGap: 20,
          textStyle: {
            fontSize: 12,
            color: "inherit",
          },
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线,
              color: "rgba(255,255,255,.1)",
            },
            show: true, //隐藏
          },
          axisLabel: {
            textStyle: {
              color: "#AED0EF",
              fontSize: 11,
              fontFamily: "Microsoft YaHei",
              fontWeight: 400,
            },
          },
        },
        yAxis: {
          name: "（月份）",
          nameTextStyle: {
            color: "#074C8B",
            fontSize: 10,
            // align: "right",
            padding: [0, 10, -5, -20],
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线,
              color: "rgba(255,255,255,.1)",
            },
            show: true, //隐藏
          },
          axisLabel: {
            textStyle: {
              color: "#AED0EF",
              fontSize: 11,
              fontFamily: "Microsoft YaHei",
              fontWeight: 400,
            },
          },
          type: "category",
          data: ["一月", "二月", "三月", "四月"],
        },
        series: [
          {
            name: "淘宝",
            type: "bar",
            data: [156, 116, 85, 85],
            itemStyle: {
              normal: {
                color: colorList[0],
              },
            },
          },
          {
            name: "京东",
            type: "bar",
            data: [84, 52, 34, 34, 52],
            itemStyle: {
              normal: {
                color: colorList[1],
              },
            },
          },
          {
            name: "乐村淘",
            type: "bar",
            data: [75, 89, 42, 32],
            itemStyle: {
              normal: {
                color: colorList[2],
              },
            },
          },
          {
            name: "拼多多",
            type: "bar",
            data: [120, 156, 45, 58],
            itemStyle: {
              normal: {
                color: colorList[3],
              },
            },
          },
          {
            name: "抖音",
            type: "bar",
            data: [154, 160, 78, 64],
            itemStyle: {
              normal: {
                color: colorList[4],
              },
            },
          },
          {
            name: "天猫",
            type: "bar",
            data: [116, 76, 45, 45],
            itemStyle: {
              normal: {
                color: colorList[5],
              },
            },
          },
        ],
      };

      myChart.setOption(option, { notMerge: true });
    },
    openDetail(type) {
      switch (type) {
        case "count":
          this.$refs.saleCountDetail.show = true;
          break;
        case "online":
          this.$refs.saleOnlineDetail.show = true;
          break;
        case "offline":
          this.$refs.saleOfflineDetail.show = true;
          break;
        case "number":
          this.$refs.saleNumberDetail.show = true;
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.left_sale {
  width: 100%;
  height: 380px;

  .sale_data {
    height: 132px;
    width: 100%;
    display: flex;
    .sale_online {
      width: 275px;
      height: 100%;
      color: #fff;
      .icon {
        height: 70px;
        width: auto;
      }
      .more {
        width: 100%;
        margin-left: 25px;
        text-align: left;
        margin-top: -4px;
        .name {
          font-size: 14px;
          color: #aed0ef;
        }
      }
    }
    .value {
      font-size: 30px;
    }
    .unit {
      font-size: 14px;
      margin-left: 6px;
    }
    .sale_count {
      width: 255px;
      height: 100%;
      position: relative;
      color: #fff;
      .desc {
        position: absolute;
        left: 40%;
        top: 12px;
      }
      .name {
        position: absolute;
        left: 40%;
        top: 58px;
        font-size: 14px;
      }
      img {
        height: 92px;
        width: auto;
        margin-top: 6px;
        left: 44%;
      }
    }
  }
  .more_data {
    display: flex;
    height: 200px;
    .more_data_box {
      height: 100%;
      .title {
        color: #fff;
        font-size: 18px;
        text-align: left;
        img {
          width: 15px;
          height: auto;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          width: 80px;
          border-top: 1px dashed #aed0ef;
          margin: 0 20px;
          transform: translateY(-5px);
          margin: 0 5px 0 20px;
        }
      }
    }
    .chart_1 {
      width: 256px;
      height: calc(100% - 24px);
    }
    .chart_2 {
      width: 276px;
      height: calc(100% - 24px);
    }
    .chart_3 {
      width: 260px;
      height: calc(100% - 24px);
    }
    .chart_4 {
      width: 266px;
      height: calc(100% - 24px);
    }
  }
}
</style>